<template>
  <div class="fab-container" :class="{ extended: isHovered }">
    <div class="fab-buttons">
      <div
        class="fab-action"
        v-for="(action, index) in actions_s"
        :key="index"
        :style="{ 'transition-delay': `${index * 0.1}s` }"
        @click="handleAction(action.name)">
        <i :class="action.icon"></i>
        <span class="tooltip">{{ action.tooltip }}</span>
      </div>
    </div>

    <div class="fab-main" @click="isHovered = !isHovered">
      <i class="fas fa-cog"></i>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import appStore from "@/stores"
import { storeToRefs } from "pinia"
const { themeIcon } = storeToRefs(appStore.homeviewStore)
const props = defineProps({
  actions: {
    type: Object,
    default: () => [],
  },
  initExpand: {
    type: Boolean,
    default: false,
  },
})
const isHovered = ref(props.initExpand)
const actions_s = ref([
  { name: "backToTop", icon: "fas fa-arrow-up", tooltip: "回到顶部" },
  { name: "toggleTheme", icon: themeIcon, tooltip: "切换模式" },
  ...props.actions,
])

const emits = defineEmits(["backToTop", "toggleTheme", "edit", "add", "delete", "showMenu"])

const handleAction = (actionName) => {
  if (actionName === "backToTop") {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    })
  } else if (actionName === "toggleTheme") {
    appStore.homeviewStore.toggleTheme()
  } else {
    emits(actionName)
  }
  isHovered.value = false
}
</script>

<style scoped>
.fab-container {
  position: fixed;
  right: 2%;
  bottom: 2%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fab-main {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.fab-main:hover {
  transform: rotate(90deg) scale(1.1);
}

.fab-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
  z-index: -100;
}

.fab-container.extended .fab-buttons {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fab-action {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-reverse);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  opacity: 0;
  transform: translateY(10px);
}

.fab-container.extended .fab-action {
  opacity: 1;
  transform: translateY(0);
}

.fab-action:hover {
  transform: scale(1.15) translateY(-5px);
}

.tooltip {
  position: absolute;
  right: 100%;
  background: var(--primary);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--border-radius);
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.fab-action:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .fab-container {
    bottom: 20px;
    right: 20px;
  }

  .fab-main {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}
</style>
